<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" />
		<meta name="format-detection" content="telephone=no, address=no, email=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<meta name="misapplication-tap-highlight" content="no" />
		<meta name="HandheldFriendly" content="true" />
		<link rel="stylesheet" href="css/mui.min.css" type="text/css" charset="utf-8" />
		<link rel="stylesheet" href="css/style.css" type="text/css" charset="utf-8" />
		<link rel="stylesheet" href="css/product.css" type="text/css" charset="utf-8" />
	</head>

	<body>
		<header class="mui-bar mui-bar-nav" style="padding: 0px;height: 2.64rem;">
			<div class="header">
				<div class="mui-header text-center" style="background:none;">
					<div class="title" style="line-height: 0.88rem;">主页</div>
				</div>
				<div class="profile" style="padding:0 0.64rem;display:table;height:1.76rem;width: 100%;">
					<div style="display:table-row;">
						<div style="display: table-cell;vertical-align: middle;">
							<div>
								<span style="margin-left:-0.5rem" class="pic-icon fl inline-block pic-icon-person1"></span>
								<div class="fl inline-block">
									<span>张全蛋</span>
								</div>
							</div>
							<div class="clearfix"></div>
							<div style="margin-top:0.15rem">
								<span style="margin-left:-0.5rem" class="pic-icon fl inline-block pic-icon-notice"></span>
								<div class="fl inline-block">
									<span>经销商王老五出库提醒</span><br>
									<span>2016-02-16 11:26:53 </span>
								</div>
							</div>
						</div>
						<div style="display: table-cell;vertical-align: middle;">
							<img src="img/login/scan.png" style="width:0.95rem;float:right;" />
						</div>
					</div>
				</div>
			</div>
		</header>
		<div class="mui-content" style="margin-top:2.64rem;">
			<div class="stores" style="margin-bottom:0.88rem;height:9.35rem;overflow:scroll">
				<p class="text-center" style="margin-bottom:0.15rem">当前库存</p>
				<div class="mui-stock-content" id="pullrefresh" >
					<div>
						<ul class="plist" id="plist" style="margin:0px;">
							<li class="pitem mui-table">
								<div class="mui-table-cell" style="width:1.05rem;vertical-align: middle;">
									<img src="img/login/productSample.png" style="width:1.05rem;vertical-align: middle;" />
								</div>
								<div class="mui-table-cell" style="vertical-align: middle;padding-left:0.32rem">
									<p>贵州习酒</p>
									<p>库存：<span class="colorblue">1250000000000</span> 箱</p>
									<p style="margin-bottom:0px">公司：贵州茅台集团习酒有限责任公司</p>
								</div>
							</li>
							<li class="pitem mui-table">
								<div class="mui-table-cell" style="width:1.05rem;vertical-align: middle;">
									<img src="img/login/productSample.png" style="width:1.05rem;vertical-align: middle;" />
								</div>
								<div class="mui-table-cell" style="vertical-align: middle;padding-left:0.32rem">
									<p>贵州习酒</p>
									<p>库存：<span class="colorblue">1250000000000</span> 箱</p>
									<p style="margin-bottom:0px">公司：贵州茅台集团习酒有限责任公司</p>
								</div>
							</li>
							<li class="pitem mui-table">
								<div class="mui-table-cell" style="width:1.05rem;vertical-align: middle;">
									<img src="img/login/productSample.png" style="width:1.05rem;vertical-align: middle;" />
								</div>
								<div class="mui-table-cell" style="vertical-align: middle;padding-left:0.32rem">
									<p>贵州习酒</p>
									<p>库存：<span class="colorblue">1250000000000</span> 箱</p>
									<p style="margin-bottom:0px">公司：贵州茅台集团习酒有限责任公司</p>
								</div>
							</li>
							<li class="pitem mui-table">
								<div class="mui-table-cell" style="width:1.05rem;vertical-align: middle;">
									<img src="img/login/productSample.png" style="width:1.05rem;vertical-align: middle;" />
								</div>
								<div class="mui-table-cell" style="vertical-align: middle;padding-left:0.32rem">
									<p>贵州习酒</p>
									<p>库存：<span class="colorblue">1250000000000</span> 箱</p>
									<p style="margin-bottom:0px">公司：贵州茅台集团习酒有限责任公司</p>
								</div>
							</li>
							<li class="pitem mui-table">
								<div class="mui-table-cell" style="width:1.05rem;vertical-align: middle;">
									<img src="img/login/productSample.png" style="width:1.05rem;vertical-align: middle;" />
								</div>
								<div class="mui-table-cell" style="vertical-align: middle;padding-left:0.32rem">
									<p>贵州习酒</p>
									<p>库存：<span class="colorblue">1250000000000</span> 箱</p>
									<p style="margin-bottom:0px">公司：贵州茅台集团习酒有限责任公司</p>
								</div>
							</li>
							<li class="pitem mui-table">
								<div class="mui-table-cell" style="width:1.05rem;vertical-align: middle;">
									<img src="img/login/productSample.png" style="width:1.05rem;vertical-align: middle;" />
								</div>
								<div class="mui-table-cell" style="vertical-align: middle;padding-left:0.32rem">
									<p>贵州习酒</p>
									<p>库存：<span class="colorblue">1250000000000</span> 箱</p>
									<p style="margin-bottom:0px">公司：贵州茅台集团习酒有限责任公司</p>
								</div>
							</li>
						</ul>
					</div>

				</div>
			</div>
		</div>
		<footer class="mui-bar mui-bar-footer">
			<nav class="mui-bar mui-bar-tab" style="font-weight: bold;">
				<a class="mui-tab-item mui-active" id="index" data-title="主页">
					<span class="pic-icon pic-icon-home"></span>
					<span class="mui-tab-label">主页</span>
				</a>
				<a class="mui-tab-item" id="main-inout" data-title="出入库">
					<span class="pic-icon pic-icon-inout"></span>
					<span class="mui-tab-label">出入库</span>
				</a>
				<a class="mui-tab-item" id="main-jxs" data-title="经销商">
					<span class="pic-icon pic-icon-jxs"></span>
					<span class="mui-tab-label">经销商</span>
				</a>
				<a class="mui-tab-item" id="main-center" data-title="个人中心">
					<span class="pic-icon pic-icon-person"></span>
					<span class="mui-tab-label">个人中心</span>
				</a>
			</nav>
		</footer>

	</body>
	<script src="js/resize.js"></script>
	<script src="js/mui.min.js"></script>
	<script src="js/redirect.js"></script>
	<script type="text/javascript">
		mui.init({
			pullRefresh: {
				container: '#pullrefresh',
				up: {
					contentrefresh: '正在加载...',
					contentnomore: '没有更多数据了',
					callback: pullupRefresh
				}
			}
		});

		var count = 0;
		function ajaxClose(url, data) {
			mui.ajax(url, {
				data: data,
				dataType: 'json', //服务器返回json格式数据
				type: 'get', //HTTP请求类型
				timeout: 10000, //超时时间设置为10秒；
 				async:true, //异步设为true
				success: function(data) {
					//服务器返回响应，根据响应结果，分析是否登录成功；
					formList(data);
				},
				error: function(xhr, type, errorThrown) {
					//异常处理；
				}
			});
		}
		function formList(list){
			setTimeout(function() {
				mui('#pullrefresh').pullRefresh().endPullupToRefresh((++count > 2)); //参数为true代表没有更多数据了。
				var table = document.body.querySelector('.plist');
				var cells = document.body.querySelectorAll('.pitem');
				for(var i = 0, len = list.length; i < len; i++) {
					var temp = list[i];
					var li = document.createElement('li');
					li.className = 'pitem mui-table';
					var html = '';
					html += '<div class="mui-table-cell" style="width:1.05rem;vertical-align: middle;">' +
						'<img src="' + temp.src + '" style="width:1.05rem;vertical-align: middle;" />' +
						'</div>' +
						'<div class="mui-table-cell" style="vertical-align: middle;padding-left:0.32rem">' +
						'<p>' + temp.productName + '</p>' +
						'<p>库存：<span class="colorblue">' + temp.stock + '</span> 箱</p>' +
						'<p style="margin-bottom:0px">公司：' + temp.companyName + '</p>' +
						'</div>';
					li.innerHTML = html;
					table.appendChild(li);
				}
			}, 1500);
		}
		/**
		 * 上拉加载具体业务实现
		 */
		function pullupRefresh() {
			var list=ajaxClose('js/json/product.json');		
		}
		if(mui.os.plus) {
			mui.plusReady(function() {
				setTimeout(function() {
					mui('#pullrefresh').pullRefresh().pullupLoading();
				}, 1000);

			});
		} else {
			mui.ready(function() {
				mui('#pullrefresh').pullRefresh().pullupLoading();
			});
		}
		
		
		(function($,doc){
			$.plusReady(function(){
				var pitemlist=document.querySelectorAll('.pitem');
				$.each(pitemlist,function(index,item){
				  item.addEventListener('tap',function(){
				  	 $.openWindow({
					    url:'productInfo.html',
					    id:'productInfo',
					    styles:{
					      top:0,//新页面顶部位置
					      bottom:0,//新页面底部位置
					    },
					    extras:{
					      //自定义扩展参数，可以用来处理页面间传值
					    },
					    createNew:false,//是否重复创建同样id的webview，默认为false:不重复创建，直接显示
					    show:{
					      autoShow:true,//页面loaded事件发生后自动显示，默认为true
					      aniShow:'slide-in-right',//页面显示动画，默认为”slide-in-right“；
//					      duration:animationTime//页面动画持续时间，Android平台默认100毫秒，iOS平台默认200毫秒；
					    },
					    waiting:{
					      autoShow:true,//自动显示等待框，默认为true
					      title:'正在加载...',//等待对话框上显示的提示内容
					    }
					})
				  })
				}) 
			   
				
			})
		}(mui,document))
	</script>

</html>